<template>
  <div class="publishedArticle-page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <my-bread>{{ $route.query.id ? '编辑文章' : '发布文章' }}</my-bread>
      </div>
      <!-- 表单区域 -->
      <el-form ref="Articleform" :model="articleForm" :rules="formRules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="articleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <!-- 富文本组件 -->
          <quill-editor
            @blur="changeEditor"
            v-model="articleForm.content"
            :options="editorOption"
          />
        </el-form-item>
        <el-form-item label="封面" prop="cover">
          <!-- 每次切换就清空数组 -->
          <el-radio-group @change="articleForm.cover.images = []" v-model="articleForm.cover.type">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="-1">自动</el-radio>
            <el-radio :label="0">无图</el-radio>
          </el-radio-group>
          <!-- 将来用来预览封面图片  显示单图和三图-->
          <div v-if="articleForm.cover.type === 1 || articleForm.cover.type === 3">
            <!-- 需要在这个位置才能接收到，子组件传递过来的 -->
            <my-cover
              @through="changeCover"
              v-for="i in articleForm.cover.type"
              :key="i"
              v-model="articleForm.cover.images[i - 1]"
              ></my-cover>
          </div>
        </el-form-item>
        <el-form-item label="频道" prop="channel_id">
          <my-channel v-model="articleForm.channel_id"></my-channel>
        </el-form-item>
        <el-form-item label="" v-if="$route.query.id">
          <el-button type="success" @click="editArticle">编辑文章</el-button>
        </el-form-item>
        <el-form-item label="" v-else>
          <el-button type="primary" @click="addArticle(false)">发布文章</el-button>
          <el-button @click="addArticle(true)">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'publishedArticle',
  components: {
    quillEditor
  },
  data () {
    const validateCover = (rule, value, callback) => {
      // console.log(value);
      // 单图
      if (value.type === 1) {
        if (!value.images[0]) {
          callback(new Error('请选择一张图片'))
          return false
        }
      }
      // 三图
      if (value.type === 3) {
        if (!(value.images[0] && value.images[1] && value.images[2])) {
          callback(new Error('请选择三张图片'))
          return false
        }
      }
      // 执行到这就代表 验证通过
      callback()
    }
    return {
      articleForm: {
        // 标题
        title: null,
        // 文章内容
        content: null,
        // 封面
        cover: {
          // 封面类型
          type: 1,
          // 封面图片
          images: []
        },
        // 文章所属id
        channel_id: null
      },
      // 富文本数据对象
      editorOption: {
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 倾斜 下划线 删除线
            ['blockquote', 'code-block'], // 引号双引号代码块
            [{ header: 1 }, { header: 2 }], // h1 h2
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表无序列表
            [{ indent: '-1' }, { indent: '+1' }], // 向前缩进，向后缩进
            ['image'] // 图片
          ]
        }
      },
      // 验证规则
      formRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 3, max: 30, message: '最少输入3个字符~最多输入30个字符', trigger: 'blur' }
        ],
        channel_id: [
          { required: true, message: '请选择一个频道', trigger: 'change' }
        ],
        content: [
          { required: true, message: '内容必填', trigger: 'blur' }
        ],
        cover: [
          { validator: validateCover, trigger: 'change' }
        ]
      }
    }
  },
  created () {
    if (this.$route.query.id) {
      this.getArticle()
    }
  },
  // 防止用户点击编辑文章之后，又点击了发布文章，问题：发布文章也会有数据回填的效果，
  // 侦听器 监听路径栏中的id变化,根据id来判断 有id就是编辑，无id就是发布
  watch: {
    '$route.query.id': function () {
      if (this.$route.query.id) {
        this.getArticle()
      } else {
        this.$refs.Articleform.resetFields()
      }
    }
  },
  methods: {
    // 获取文章
    async getArticle () {
      const { data: { data } } = await this.$axios.get(`/mp/v1_0/articles/${this.$route.query.id}`)
      this.articleForm = data
    },
    // 手动触发，表单验证
    changeEditor () {
      this.$refs.Articleform.validateField('content')
    },
    // 接受子传给父
    changeCover () {
      this.$refs.Articleform.validateField('cover')
    },
    // 添加文章 为true是添加至草稿
    addArticle (falg) {
      this.$refs.Articleform.validate(async vaild => {
        // vaild 为true,表示效验全部通过
        if (vaild) {
          try {
            await this.$axios.post(`/mp/v1_0/articles?draft=${falg}`, this.articleForm)
            this.$message.success('发布文章成功！')
            this.$router.push('/articles')
          } catch (e) {
            this.$message.error('发布文章失败！')
          }
        }
      })
    },
    // 编辑文章
    async editArticle () {
      try {
        await this.$axios.put(`/mp/v1_0/articles/${this.$route.query.id}`, this.articleForm)
        this.$message.success('编辑文章成功!')
        this.$router.push('/articles')
      } catch (e) {
        this.$message.error('编辑文章失败！')
      }
    }
  }
}
</script>

<style scoped lang="less">
  // 深度选择器，可以作用于子组件
  ::v-deep .ql-editor {
    height: 300px;
  }
</style>
